<!--
 * @Author: lsy
 * @Date: 2023-02-13 16:44:44
 * @LastEditors: lsy
 * @LastEditTime: 2023-02-13 17:54:28
 * @Description: 年部年级选择器
-->
<template>
	<div class="grade-select">
		<el-select v-model="annualDepartValue" placeholder="请选择年部" @change="annualDepartChange">
			<el-option v-for="(item, index) in annualDepartOptions" :key="index" :label="item.label" :value="item.value"></el-option>
		</el-select>
		<el-select v-model="gradeValue[annualDepartValue]" placeholder="请选择年级" @change="gradeChange">
			<el-option v-for="(item, index) in gradeOptions" :key="index" :label="item.label" :value="item.value"></el-option>
		</el-select>
	</div>
</template>


<script setup>
import { defineEmits, ref, computed } from 'vue';
const emits = defineEmits(['update:annualDepart', 'update:grade'])
// 年部
const annualDepartOptions = [
	{ label: '学前', value: 'xueqian' },
	{ label: '小学', value: 'xiaoxue' },
	{ label: '初中', value: 'chuzhong' },
	{ label: '高中', value: 'gaozhong' },
]
const annualDepartValue = ref(null)
const annualDepartChange = value => {
	emits('update:annualDepart', value)
	emits('update:grade', gradeValue[value])
}

// 年级
const gradeOptions = computed(() => {
	if (annualDepartValue.value === 'xueqian') {
		return [
			{label: '小班', value: 'xiaoban'},
			{label: '中班', value: 'zhongban'},
			{label: '大班', value: 'daban'},
		]
	}
	if (annualDepartValue.value === 'xiaoxue') {
		return [
			{label: '一年级', value: 'x_one'},
			{label: '二年级', value: 'x_two'},
			{label: '三年级', value: 'x_three'},
			{label: '四年级', value: 'x_four'},
			{label: '五年级', value: 'x_five'},
			{label: '六年级', value: 'x_six'},
		]
	}
	if (annualDepartValue.value === 'chuzhong') {
		return [
			{label: '初一', value: 'c_one'},
			{label: '初二', value: 'c_two'},
			{label: '初三', value: 'c_three'},
		]
	}
	if (annualDepartValue.value === 'gaozhong') {
		return [
			{label: '高一', value: 'g_one'},
			{label: '高二', value: 'g_two'},
			{label: '高三', value: 'g_three'},
		]
	}
	return []
})
const gradeValue = ref({
	xueqian: 'xiaoban',
	xiaoxue: 'x_one',
	chuzhong: 'c_one',
	gaozhong: 'g_one',
})

const gradeChange = value => {
	emits('update:grade', value)
}
</script>

<style lang="scss" scoped></style>
